<script setup lang="ts">

import {ref} from "vue";
import Card from "@/components/Card.vue";

const far = ref('aa');

// const vBorder = {
//   mounted: (el, binding, node) => {
//     console.log('el', el);
//     console.log('binding', binding)
//     console.log('node', node);
//     el.classList.add("border", "shadow", "rounded-3", "p-3");
//   },
// };

//main.ts中注册全局自定义指令
// app.directive('border', {//自定义指令不需要前缀v-，注册border指令，调用 v-border
//   mounted: (el) => {
//     console.log(el);
//     el.classList.add("border", "shadow", "rounded-3", "p-3");
//   }
// })

const bg = ref('text-bg-danger');

</script>

<template>
  <card title="自定义指令: v-border">
    <p v-border:trim='bg'>888888888</p>
  </card>
  <card title="全局自定义指令">
    <p v-color="bg" class="p-3 rounded-3 border shadow">字段文字text-bg-danger样式从全局指令加载进来的</p>
  </card>
</template>

<style scoped>

</style>